<template>
	<view @tap="chuping">
		<view class="header">
			<view class="head_img"></view>
			<scroll-view scroll-x class="bg-white nav text-center">
				<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in nav" :key="index" @tap="tabSelect"
				 :data-id="index">
					{{item}}
				</view>
			</scroll-view>
			<image class="head_img" src="../../static/image/jia_4.png" @click.stop="qipao"></image>
		</view>
		<!-- 右上角气泡 -->
		<view class="floats" v-if='stu == 2'>
			<image class="f_img" src="../../static/image/biankuan_6.png"></image>
			<view class="f_con">
				<view class="f_list" @click="addBuildGroup">
					<view class="f_list_img">
						<image class="f_list_img" src="../../static/image/qunliao_6.png"></image>
					</view>
					<view class="f_list_r">发起群聊</view>
				</view>
				<view class="f_list" @click="addFriends">
					<view class="f_list_img">
						<image class="f_list_img" src="../../static/image/tianjiahaoyou_6.png"></image>
					</view>
					<view class="f_list_r f_list_r2">添加好友</view>
				</view>
				<view class="f_list" @click="saoyisao">
					<view class="f_list_img">
						<image class="f_list_img" src="../../static/image/sys_6.png"></image>
					</view>
					<view class="f_list_r f_list_r3">扫一扫</view>
				</view>
			</view>
		</view>
		<view class="searchs">
			<view class="vip">
				<image src="../../static/image/vip.png" class="vip1"></image>
				<image src="../../static/image/zhuanqu_4.png" class="vip2" @click="vip"></image>
			</view>
			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" @click="InputFocus" placeholder="搜索" confirm-type="search"></input>
				</view>
			</view>
		</view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in messList" :key="index"
				 v-if="TabCur == 0 && item.type == 1" @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd"
				 :data-target="'move-box-' + index" @click="hm(item)">
					<image v-if="item.type == 1" class="cu-avatar round lg" :src="item.avatar?item.avatar:'../../static/image/bg_img.png'"></image>
					<image v-if="item.type == 2" class="cu-avatar round lg" :src="item.avatar?item.avatar:'../../static/image/bg_img.png'"></image>
					<view class="content">
						<view class="text-grey hides">{{item.nickname}}</view>
						<view class="text-gray hides text-sm">{{item.content}}</view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">{{item.createtime}}</view>
						<view v-if="item.readnum != 0" class="cu-tag round bg-grey sm reds">{{item.readnum}}</view>
						<view v-if="item.readnum == 0" class="cu-tag round bg-grey sm reds2">&nbsp;</view>
					</view>
					<view class="move">
						<view class="bg-grey" v-if="item.status == 1" @click.stop="zhiding(item.id,2)">置顶</view>
						<view class="bg-grey quxiao" v-if="item.status == 2" @click.stop="zhiding(item.id,1)">取消置顶</view>
						<view class="bg-red" @click.stop="del(item.id)">删除</view>
					</view>
				</view>
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in messList" :key="index"
				 v-if="TabCur == 1 && item.type == 2" @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd"
				 :data-target="'move-box-' + index" @click="hm(item)">
					<image v-if="item.type == 1" class="cu-avatar round lg" :src="item.avatar?item.avatar : '../../static/image/bg_img.png'"></image>
					<image v-if="item.type == 2" class="cu-avatar round lg" :src="item.avatar?item.avatar:'../../static/image/bg_img.png'"></image>
					<view class="content">
						<view class="text-grey hides">{{item.nickname}}</view>
						<view class="text-gray hides text-sm">{{item.content}}</view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">{{item.createtime}}</view>
						<view v-if="item.readnum != 0" class="cu-tag round bg-grey sm reds">{{item.readnum}}</view>
						<view v-if="item.readnum == 0" class="cu-tag round bg-grey sm reds2">&nbsp;</view>
					</view>
					<view class="move">
						<view class="bg-grey" v-if="item.status == 1" @click.stop="zhiding(item.id,2)">置顶</view>
						<view class="bg-grey quxiao" v-if="item.status == 2" @click.stop="zhiding(item.id,1)">取消置顶</view>
						<view class="bg-red" @click.stop="del(item.id)">删除</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null,
				gridCol: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
				messList: [],
				upmsg: null,
				baseUrl: this.$common.baseUrl,
				TabCur: 0,
				scrollLeft: 0,
				showMask:'',
				nav: ['私聊', '群聊'],
				stu: 1 //右上角气泡显示标识
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.initDat();
			this.initio();  //监听WebSocket消息
		},
		onPullDownRefresh() {
			this.initDat();
		},
		onBackPress() {
		   if(this.showMask) {  
		     this.showMask = false;  
		     return true;  
		   }else{  
		      uni.showModal({  
		        title: '提示',  
		        content: '是否退出应用?',  
		        success: function(res) {  
		            if (res.confirm) {  
		                // 退出当前应用，改方法只在App中生效  
		                plus.runtime.quit();  
						uni.closeSocket({
							success:(res)=>{
								console.log(res)
							}
						})
		            } else if (res.cancel) {  
		           
		            }  
		        }  
		      });  
		      return true  
		   }  
		},
		methods: {
			//单聊群聊切换
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.initDat();
			},
			//WebSocket聊天数据
			initio(){
				var that = this;
				var innerAudioContext = uni.createInnerAudioContext();
				uni.onSocketMessage(function(res) {
					var jsonmsg = JSON.parse(res.data);
					if ((jsonmsg.emit == 'chatMessage' || jsonmsg.emit == 'updategroup') && uni.getStorageSync('yinstus') == 1) {
						that.initDat(jsonmsg.data.msg.userinfo.uid);
						innerAudioContext.autoplay = true;
						innerAudioContext.src = 'static/image/yin.mp3';
						innerAudioContext.play();
					}
					if (jsonmsg.emit == 'chatMessage'){
						let msgListpa = 'msgList'+ jsonmsg.data.msg.userinfo.uid +'.text';
						// #ifdef APP-PLUS
						plus.io.resolveLocalFileSystemURL('/storage/emulated/0/Android/data/io.dcloud.HBuilder/apps/HBuilder/msgio/'+ msgListpa, function(entry){
							entry.file(function(file) {
								var fileReader = new plus.io.FileReader();
								fileReader.readAsText(file, 'utf-8');
								fileReader.onloadend = function(evt) {
									var list = JSON.parse(evt.target.result) //本地消息
									that.$msgchat.savafile(list, jsonmsg.data, jsonmsg.data.msg.userinfo.uid);
								}
							})
						}, function ( e ) {
							console.log( "Resolve file URL failed: " + e.message );
							that.$msgchat.savafile(null, jsonmsg.data, jsonmsg.data.msg.userinfo.uid);
						} );
						// #endif	
					}
					
				});
			},
			//初始化数据
			initDat() {
				let that = this;
				if (this.TabCur == 0) {
					var obj = {
						type: 1
					}
				} else {
					var obj = {
						type: 2
					}
				}
				this.$common.requests('/api/Chatlist/chatlist', obj).then(res => {
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
					res.data.data.forEach((key, index) => {
						if (key.avatar != '' && key.avatar != null) {
							key.avatar = that.$common.baseUrl + key.avatar;
						}
					});
					this.messList = res.data.data;
				})
			}, //结束
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			Gridchange(e) {
				this.gridCol = e.detail.value
			},
			Gridswitch(e) {
				this.gridBorder = e.detail.value
			},
			MenuBorder(e) {
				this.menuBorder = e.detail.value
			},
			MenuArrow(e) {
				this.menuArrow = e.detail.value
			},
			MenuCard(e) {
				this.menuCard = e.detail.value
			},
			SwitchSex(e) {
				this.skin = e.detail.value
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			//进入聊天页面
			hm(item) {
				if (item.type == 1) {
					uni.navigateTo({
						url: '../HM-chat/HM-chat?friend_id=' + item.friend_id + '&type=' + item.type + '&nickname=' + item.nickname
					})
				} else {
					uni.navigateTo({
						url: '../HM-chat/HM-chats?friend_id=' + item.friend_id + '&group_id=' + item.friend_id + '&type=' + item.type +
							'&nickname=' + item.nickname + '&groupnum=' + item.groupnum
					})
				}
			},
			//扫一扫
			saoyisao() {
				uni.scanCode({
					success: function(res) {
						let inarr = res.result;
						let inx = inarr.indexOf(',');
						let up = inarr.substring(0, inx);
						let ty = inarr.substring(inx + 1);
						if (ty == 1) {
							uni.navigateTo({
								url: '/pages/applyAdd/applyAdd?uid=' + up
							})
						} else {
							uni.navigateTo({
								url: '/pages/applyAddGroup/applyAddGroup?groupnum=' + up 
							})
						}

					}
				});
			},
			//删除会话列表
			del(id) {
				this.$common.requests('/api/Chatlist/chatlistdel', {
					chatlistid: id
				}).then(res => {
					this.initDat();
				})
			},
			//置顶聊天
			zhiding(id,status){
				var obj = {
					chatlistid:id,
					status:status
				}
				this.$common.requests('/api/Chatlist/chatlisttop',obj).then(res => {
					this.initDat();
				})
			},
			InputFocus() {
				uni.navigateTo({
					url: '../messSearch/messSearch?TabCur=' + this.TabCur
				})
			},
			//气泡显示
			qipao() {
				if (this.stu == 1) {
					this.stu = 2
				} else {
					this.stu = 1
				}
			},
			//点击屏幕气泡消失
			chuping() {
				this.stu = 1
			},
			//添加好友
			addFriends() {
				this.stu = 1
				uni.navigateTo({
					url: '../addFriends/addFriends'
				})
			},
			//发起群聊
			addBuildGroup() {
				this.stu = 1;
				uni.navigateTo({
					url: '../selectContacts/addBuildGroup?ty=1'
				})
			},
			//vip专区
			vip() {
				uni.navigateTo({
					url: '../vip/vip'
				})
			}
		}
	}
</script>

<style>
	.page {
		width: 100vw;
	}

	.header {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background: #F8F8F8;
		padding-top: 40upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFF;
		color: gray;
	}

	.text-center {
		width: 60% !important;
	}

	.head_img {
		width: 45upx;
		height: 45upx;
		margin: 0 30upx;
	}

	.text-blue {
		color: #333333 !important;
		font-size: 36upx;
		border: none !important;

	}

	.searchs {
		padding-top: 150upx;
		background: #F5F4F9;
	}

	.search {
		background: #F5F4F9;
	}

	.round {
		border-radius: 10upx !important;
		background: #FFF!important;
	}

	.vip {
		padding: 0 30upx;
		height: 80upx;
		position: relative;
	}

	.vip1 {
		width: 100%;
		height: 100%;
	}

	.vip2 {
		position: absolute;
		top: 15upx;
		right: 50upx;
		width: 150upx;
		height: 50upx;

	}

	.menu-avatar {
		margin: 0 30upx;
	}

	.lg {
		border-radius: 50% !important;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}

	.reds {
		background: #DE0B0B;
		color: #FFFFFF;
		border-radius: 50% !important;
		padding: 10upx !important;
	}

	.reds2 {
		background: none;
	}

	.floats {
		position: fixed;
		top: 140upx;
		right: 30upx;
		width: 40%;
		height: 350upx;
		z-index: 999;
		color: #FFF;
	}

	.f_img {
		width: 100%;
		height: 100%;
	}

	.f_con {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.f_list {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.f_list_img {
		width: 30%;
		text-align: center;
	}

	.f_list_img image {
		width: 50upx;
		height: 45upx;
	}

	.f_list_r {
		width: 70%;
		border-bottom: 1px solid #797878;
		padding: 40upx 0;
	}

	.f_list_r2 {
		padding: 33upx 0;
	}

	.f_list_r3 {
		border-bottom: none
	}

	.hides {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.quxiao{
		width: 200upx!important;
		/* font-size: 20upx!important; */
	}
</style>
